<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-05 10:15:54
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-05 14:05:20
 * @FilePath: \giteeDownload\testthree\src\views\tween.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" style="height:100vh;width:100vw;">
    <div style="background:red;top:100px;left:100px;" :style="{ width: pos.x + 'px', height: pos.y + 'px' }"></div>
  </div>
</template>

<script setup>
import TWEEN from '@tweenjs/tween.js';
import { onMounted } from 'vue';
const pos = { x: 0, y: 0 };
const tween = new TWEEN.Tween(pos);//创建一段tween动画
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({ x: 100, y: 50 }, 2000);
//tween动画开始执行
tween.start();

// 生成一个canvas对象，标注文字为参数name
function createCanvas(name) {
  /**
   * 创建一个canvas对象，绘制几何图案或添加文字
   */
  const canvas = document.createElement("canvas");
  const arr = name.split(""); //分割为单独字符串
  let num = 0;
  const reg = /[\u4e00-\u9fa5]/;
  for (let i = 0; i < arr.length; i++) {
    if (reg.test(arr[i])) { //判断是不是汉字
      num += 1;
    } else {
      num += 0.5; //英文字母或数字累加0.5
    }
  }
  // 根据字符串符号类型和数量、文字font-size大小来设置canvas画布宽高度
  const h = 80; //根据渲染像素大小设置，过大性能差，过小不清晰
  const w = h + num * 32;
  canvas.width = w;
  canvas.height = h;
  const h1 = h * 0.8;
  const c = canvas.getContext('2d');
  // 定义轮廓颜色，黑色半透明
  c.fillStyle = "rgba(0,0,0,0.5)";
  // 绘制半圆+矩形轮廓
  const R = h1 / 2;
  c.arc(R, R, R, -Math.PI / 2, Math.PI / 2, true); //顺时针半圆
  c.arc(w - R, R, R, Math.PI / 2, -Math.PI / 2, true); //顺时针半圆
  c.fill();
  // 绘制箭头
  c.beginPath();
  const h2 = h - h1;
  c.moveTo(w / 2 - h2 * 0.6, h1);
  c.lineTo(w / 2 + h2 * 0.6, h1);
  c.lineTo(w / 2, h);
  c.fill();
  // 文字
  c.beginPath();
  c.translate(w / 2, h1 / 2);
  c.fillStyle = "#ffffff"; //文本填充颜色
  c.font = "normal 32px 宋体"; //字体样式设置
  c.textBaseline = "middle"; //文本与fillText定义的纵坐标
  c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
  c.fillText(name, 0, 0);
  return canvas;
}

onMounted(() => {
  const canvas = createCanvas('设备A奇怪的，不可能吧反正就是如此幸好')
  document.getElementById('container').appendChild(canvas)
})
</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>